<template>
  <div class="register_wrap">
    <headTop :headClass="'no_back'">Create a New Account</headTop>
    <div class="input_info">
      <div class="select_country" @click="selectArea">
        <div class="sel_left">
          <i class="iconfont icon-zhishiditu"></i>
          <span class="area">{{country}}</span>
        </div>
        <div class="sel_right">
          <span class="code">+{{code}}</span>
          <i class="iconfont icon-fanhui-copy"></i>
        </div>
      </div>
      <label for="phone" class="info">
        <i class="iconfont icon-msnui-tel"></i>
        <input type="number" id="phone" placeholder="Please enter your phone number" @input="checkPhone" v-model="user.phone">
      </label>
      <div class="info send_code">
        <label for="verify" class="verify">
          <i class="iconfont icon-yanzhengmatianchong"></i>
          <input type="number" id="verify" placeholder="Please enter SMS code" v-model="user.verify">
        </label>
        <span :class="{'no_send' : !isSend, 'is_send' : isSend}" @click="sendCode">{{sendText}}</span>
      </div>
      <label for="repassword" class="info">
        <i class="iconfont icon-mima"></i>
        <input type="password" id="repassword" placeholder="Please set login password" v-model="user.password">
      </label>
      <label for="password" class="info">
        <i class="iconfont icon-mima"></i>
        <input type="password" id="password" placeholder="Please confirm the password again" v-model="user.rePassword">
      </label>
      <label class="info">
        <i class="iconfont icon-tuijian"></i>
        <input type="text" v-model="user.pid" readonly>
      </label>
    </div>
    <div class="to_register">
      <span class="public_btn" @click="submit">register</span>
    </div>
    <div class="to_login">
      <span @click="login">Login account</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'register',
  data () {
    return {
      country: 'China',
      code: '86',
      isSend: false,
      sendText: 'Send code',
      codeTime: 60,
      user: {
        phone: '',
        verify: '',
        password: '',
        rePassword: '',
        pid: ''
      }
    };
  },
  beforeMount () {
    this.getPid();
  },
  mounted () {
    this.getStorageData();
  },
  methods: {
    // Send verification code
    sendCode () {
      if (!this.user.phone) {
        this.Toast('Please enter cell phone number.');
      } else {
        if (this.isSend) {
          return false;
        } else {
          this.getCode();
        }
      }
    },
    // Count down
    timer () {
      if (this.codeTime > 0) {
        this.codeTime--;
        this.sendText = `(${this.codeTime})s`;
        setTimeout(this.timer, 1000);
      } else {
        this.codeTime = 60;
        this.sendText = 'Recapture';
        this.isSend = false;
      }
    },
    // Verify cell phone number
    checkPhone () {
      if (!/^(1[3-9])\d{9}$/.test(this.user.phone)) {
        this.isSend = true;
      } else {
        this.isSend = false;
      }
    },
    // Submission of registration
    submit () {
      if (!this.user.phone) {
        this.Toast('Please enter cell phone number.');
      } else if (!this.user.verify) {
        this.Toast('Please input verification code.');
      } else if (!this.user.password) {
        this.Toast('Please enter login password.');
      } else if (this.user.password.length < 6) {
        this.Toast('Please enter6-16Login password');
      } else if (!this.user.rePassword) {
        this.Toast('Please enter confirmation password.');
      } else if (this.user.password !== this.user.rePassword) {
        this.Toast('The two password is inconsistent.');
      } else {
        this.goRegiste();
      }
    },
    // Select country code
    selectArea () {
      this.$router.push('selectArea');
    },
    getStorageData () {
      if (localStorage.areaCode) {
        this.country = JSON.parse(localStorage.areaCode).country;
        this.code = JSON.parse(localStorage.areaCode).tel;
      }
    },
    // Sign in
    login () {
      this.$router.push('login');
    },
    // requestpid
    getPid () {
      this.axios.get('index/auth/obtainCode').then(({data}) => {
        if (data.status === 200) {
          this.user.pid = data.data.account;
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Sending verification code request
    getCode () {
      this.axios.post('index/sms/send', {
        phone: this.user.phone,
        type: 1
      }).then(({data}) => {
        if (data.status === 200) {
          this.isSend = true;
          this.timer();
        } else {
          this.Toast(data.message);
        }
      });
    },
    // Registration request
    goRegiste () {
      this.axios.post('index/auth/register', {
        phone: this.user.phone,
        password: this.user.password,
        code: this.user.verify,
        re_password: this.user.rePassword,
        pid: this.pid
      }).then(({data}) => {
        if (data.status === 200) {
          this.Toast('login was successful');
          this.$router.push('login');
        } else {
          this.Toast(data.message);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .register_wrap{
    background-color: #f5f5f5;
    padding: 164px 0 100px;
    .input_info{
      width: 100%;
      padding: 0 75px 88px;
      .select_country{
        width: 100%;
        padding-left: 36px;
        color: #282828;
        font-size: 26px;
        display: flex;
        align-items: center;
        margin-bottom: 40px;
        .sel_left{
          display: flex;
          align-items: center;
        }
        .iconfont{
          font-size: 30px;
          &.icon-zhishiditu{
            color: #423e3d;
            margin-right: 26px;
          }
        }
        .area{
          margin-right: 22px;
        }
        .code{
          margin-right: 20px;
        }
      }
      .info{
        width: 100%;
        height: 88px;
        border-radius: 44px;
        display: flex;
        align-items: center;
        padding: 0 40px;
        background-color: #fff;
        border: 1px solid #e6e6e6;
        margin-bottom: 30px;
        .iconfont{
          font-size: 36px;
          color: $color;
          margin-right: 30px;
        }
        input{
          flex: 1;
          height: 100%;
          font-size: 28px;
          color: #282828;
          &:placeholder{
            color: #999;
          }
        }
        &.send_code{
          .verify{
            width: 70%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            input{
              flex: 1;
              height: 100%;
            }
          }
          >span{
            width: 30%;
            font-size: 28px;
            color: $color;
            text-align: right;
            &.is_send{
              color: #666;
            }
          }
        }
        &:nth-last-child(1){
          margin-bottom: 0;
        }
      }
      .memory{
        width: 100%;
        padding: 0 36px;
        font-size: 26px;
        color: #666;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left{
          .iconfont{
            font-size: 30px;
            color: $color;
            margin-right: 14px;
          }
        }
      }
    }
    .to_register{
      width: 100%;
      text-align: center;
      margin-bottom: 62px;
    }
    .to_login{
      width: 100%;
      text-align: center;
      font-size: 30px;
      color: $color;
    }
  }
</style>
